<template>
    <div class="home-content">
        <el-container style="width: 100%;height: 100%">
            <el-header class="system-header">
                <h2 style="color: #ffffff;font-size: 20px">保税电商·仓储管理系统</h2>
                <div class="header-box">
                    <i class="el-icon-pie-chart" style="cursor: pointer" @click="getInEcharts"> 数据看板</i>
                    <i style="margin-left: 20px" class="el-icon-user"> Admin</i>
                </div>
            </el-header>
            <el-container style="height: 100%">
                <el-aside width="200px" style="height: 100%">
                    <div class="user-box">
                        <div class="box-image">
                            <img src="../assets/images/user.png" alt="">
                        </div>
                        <div class="box-title">
                            保税电商进销存后台系统
                        </div>
                        <div class="box-btn" @click="getOut">
                            退出登录
                        </div>
                    </div>
                    <el-menu style="border-right: 0"
                             :default-active="$route.path"
                             unique-opened
                             background-color="#2d2d2d"
                             text-color="#fff"
                             active-text-color="#ffd04b"
                             router
                    >
                        <el-submenu
                                :index="item.id"
                                v-for="item in meauList"
                                :key="item.id"
                        >
                            <template slot="title">
                                <i :class="item.icon"></i>
                                <span>{{ item.name }}</span>
                            </template>
                            <el-menu-item
                                    :index="'/' + item1.path"
                                    v-for="item1 in item.child"
                                    :key="item1.id"
                            >{{ item1.childName }}
                            </el-menu-item
                            >
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import routeList from "../router/routeList";

    export default {
        name: 'Home',
        data() {
            return {
                meauList: []
            }
        },
        created() {
            this.meauList = routeList.routeList
        },
        methods: {
            getOut() {
                this.$confirm('确定退出登录, 是否继续?', '注销', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios.post('/user/logout').then(res => {
                        if (res.data.code === 200) {
                            sessionStorage.clear();
                            this.$router.replace('/')
                            this.$message.success('注销成功')
                        }
                    })
                })
            },
            getInEcharts() {
                this.$router.push('/echartsPage')
            }
        }
    }
</script>
<style lang="less" scoped>
    .home-content {
        width: 100%;
        height: 100%;

        .el-container {
            width: 100%;
            height: 100%;

            .system-header {
                padding: 0 20px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: #2d2d2d;

                .header-box {
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    color: #fff;
                    font-size: 16px;;
                }
            }

            /deep/ .el-aside {
                height: 100%;
                background-color: #2d2d2d;

                .user-box {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-around;
                    border-bottom: 1px solid #cccccc;

                    .box-image {
                        width: 60px;
                        height: 60px;
                        border-radius: 50%;
                        overflow: hidden;
                        margin: 20px 0;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .box-title {
                        color: #fff;
                        font-size: 16px;
                    }

                    .box-btn {
                        width: 80px;
                        height: 30px;
                        margin: 20px 0;
                        border-radius: 15px;
                        text-align: center;
                        line-height: 30px;
                        color: #ffffff;
                        cursor: pointer;
                        border: 1px solid #fff;
                        font-size: 12px;
                    }
                }

                &::-webkit-scrollbar {
                    width: 0;
                }
            }
        }
    }
</style>
